<!-- src/components/TodoList.vue -->
<template>
    <div class="todo-container">
        <div class="todo-header">
            <h2>待办事项列表</h2>
            <a href="https://gitee.com/liuyin1412/vue3todolist111">gitte仓库</a>
            <div></div>
            <div class="add-todo">
                <input 
                    v-model="newTodo" 
                    @keyup.enter="addTodo"
                    placeholder="输入新的待办事项..."
                    class="form-control"
                >
                <button @click="addTodo" class="btn btn-primary">+</button>
            </div>
        </div>
        
        <!-- 添加过滤按钮 -->
        <div class="filter-buttons">
            <button 
                @click="setFilter('all')" 
                :class="{ active: store.state.filter === 'all' }"
                class="btn btn-filter"
            >
                全部
            </button>
            <button 
                @click="setFilter('active')" 
                :class="{ active: store.state.filter === 'active' }"
                class="btn btn-filter"
            >
                未完成
            </button>
            <button 
                @click="setFilter('completed')" 
                :class="{ active: store.state.filter === 'completed' }"
                class="btn btn-filter"
            >
                已完成
            </button>
        </div>
        
        <div class="todo-list">
            <div 
                v-for="(todo, index) in filteredTodos" 
                :key="index"
                class="todo-item"
                :class="{ completed: todo.completed }"
            >
                <div class="todo-content">
                    <input 
                        type="checkbox"
                        :checked="todo.completed"
                        @change="toggleTodo(getTodoIndex(todo))"
                        class="todo-checkbox"
                    >
                    <input 
                        v-if="editingIndex === getTodoIndex(todo)"
                        v-model="editingText"
                        @blur="saveEdit(getTodoIndex(todo))"
                        @keyup.enter="saveEdit(getTodoIndex(todo))"
                        class="form-control edit-input"
                    >
                    <span 
                        v-else
                        @click="startEdit(getTodoIndex(todo), todo.text)"
                        class="todo-text"
                        :class="{ completed: todo.completed }"
                    >
                        {{ todo.text }}
                    </span>
                </div>
                <div class="todo-actions">
                    <button @click="deleteTodo(getTodoIndex(todo))" class="btn btn-danger btn-sm delete-button">
                        <IconTrash />
                    </button>
                </div>
            </div>
        </div>
        
        <div v-if="filteredTodos.length === 0" class="empty-state">
            暂无待办事项，添加一个开始吧！
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import store from '../store/index.js'
import IconTrash from './icons/IconTrash.vue'

const newTodo = ref('')
const editingIndex = ref(-1)
const editingText = ref('')

// 计算过滤后的待办事项
const filteredTodos = computed(() => {
    return store.getFilteredTodos()
})

// 获取原始索引
const getTodoIndex = (todo) => {
    return store.state.todos.indexOf(todo)
}

const addTodo = () => {
    if (newTodo.value.trim()) {
        store.addTodo(newTodo.value.trim())
        newTodo.value = ''
    }
}

const deleteTodo = (index) => {
    store.deleteTodo(index)
}

const toggleTodo = (index) => {
    store.toggleTodo(index)
}

const setFilter = (filter) => {
    store.setFilter(filter)
}

const startEdit = (index, todo) => {
    editingIndex.value = index
    editingText.value = todo
}

const saveEdit = (index) => {
    if (editingText.value.trim()) {
        store.updateTodo(index, editingText.value.trim())
    }
    editingIndex.value = -1
    editingText.value = ''
}
</script>

<style scoped>
.delete-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
}

.filter-buttons {
    padding-left: 1.5rem ;
    margin: 1rem 0;
    display: flex;
    gap: 0.5rem;
}

.btn-filter {
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    background-color: #f8f9fa;
    cursor: pointer;
    border-radius: 4px;
}

.btn-filter.active {
    background-color: #007bff;
    color: white;
}

.todo-checkbox {
    margin-right: 0.5rem;
}

.todo-text.completed {
    text-decoration: line-through;
    color: #6c757d;
}

.todo-item.completed {
    opacity: 0.7;
}
</style>
     
                     
    









 